<!doctype html>
<html>
<head>
    <include file="Public/head"/>
    <link href="__CSS__/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="__JS__/jquery-2.1.0.min.js"></script>
    <style>
        .btn-active{
            text-align: center;
            background: rgba(180, 17, 64, 0.8);
            color: #fff;
            cursor: pointer;
            border: 0;
        }
        .btn-disable{
            text-align: center;
            background: #e4e4e4;
            color: #717171;
            cursor: not-allowed;
            border: 0;
        }
    </style>
</head>
<body >
<div id="page">
    <header id="header">
        <div class="header_l"> <a class="ico_10" onClick="javascript:history.back();"> 返回 </a> </div>
        <h1> 登录/注册 </h1>
    </header>
</div>
<section class="wrap" style="padding: 0 0.7rem;">
    <div id="leftTabBox" class="loginBox">
        <div class="hd"> <span>欢迎光临，登录后体验更多服务</span>
            <ul>
                <li <if condition="$type eq 'login'">class="on"</if> ><a href="{:U('Login/index',array('type'=>'login'))}">登录</a></li>
                <li <if condition="$type eq 'register'">class="on"</if> ><a href="{:U('Login/index',array('type'=>'register'))}">注册</a></li>
            </ul>
        </div>

        <div class="bd" <if condition="$type neq 'login'">style="display:none"</if> >
        <ul>
            <div class="table_box">
                <form name="formLogin" action="" method="post" onSubmit="return userLogin()">
                    <dl>
                        <dd>
                            <input placeholder="用户名/手机/电子邮件地址" name="username" type="text"  class="inputBg" id="username" value="{$_COOKIE['username']}"/>
                        </dd>
                    </dl>
                    <dl>
                        <dd>
                            <input placeholder="密码"  name="password" type="password" class="inputBg" value="{$_COOKIE['password']}"/>
                        </dd>
                    </dl>
                    <dl>
                        <dd>
                            <input type="checkbox" value="1" name="remember" id="remember" style="vertical-align:middle; zoom:200%;" /><label for="remember"> 记住密码</label>
                        </dd>
                    </dl>
                    <dl>
                        <dd>
                            <input type="hidden" name="act" value="login" />
                            <input type="hidden" name="acturl" value="{$acturl}" />
                            <input type="submit" name="submit"  value="立即登录" class="c-btn3" />
                        </dd>
                    </dl>
                </form>
                <!--
                          <dl>
                            <dd> <a href="{:U('Login/forget')}" class="f6">忘记密码</a> </dd>
                          </dl>
                -->
            </div>
        </ul>
    </div>


    <div class="bd" <if condition="$type neq 'register'">style="display:none"</if> >
    <ul style="height:25rem">
        <form action="" method="post" name="formUser" onsubmit="return register();">
            <input type="hidden" name="flag" id="flag" value="register" />
            <div class="table_box">
                <dl>
                    <dd>
                        <input placeholder="请输入用户名 *" class="inputBg" name="username" autocomplete="off" type="text" />
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <input placeholder="请输入电子邮箱" class="inputBg" name="email" id="email" type="text" />
                    </dd>
                </dl>

                <dl>
                    <dd>
                        <input placeholder="请输入手机 *" class="inputBg" name="mobile" id="mobile" type="text" />
                    </dd>
                </dl>
                <!--<dl colspan="2">-->
                    <!--<dd>-->
                        <!--<input placeholder="请输入验证码 *" class="inputBg" name="code" id="code" type="text" style="padding: 0 6%;"/>-->
                    <!--</dd>-->
                    <!--<dd>-->
                        <!--<input id="get-code" type="text" class="inputBg <if condition="(time()-session('verification_time')) lt 60">btn-disable<else/>btn-active</if>" readonly="readonly" autocomplete="off" value="<if condition="(time()-session('verification_time')) lt 60">{:session("verification_time")-time()+60} S<else/>获取验证码</if>">-->
                    <!--</dd>-->
                <!--</dl>-->

                <dl>
                    <dd>
                        <input placeholder="请输入登录密码 *" class="inputBg" name="password" autocomplete="off" type="password" />
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <input placeholder="确认密码 *" class="inputBg" name="repassword" autocomplete="off" type="password" />
                    </dd>
                </dl>

                <dl>
                    <dd>
                        <input id="agreement" name="agreement" type="checkbox" value="1" checked="checked" style="vertical-align:middle; zoom:200%;" /><label for="agreement"> 我已看过并同意《<a href="">用户协议</a>》</label>
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <input name="act" type="hidden" value="register" />
                        <input type="hidden" name="back_act" value="{$acturl}" />
                        <input name="Submit" type="submit" value="下一步" class="c-btn3" />
                    </dd>
                </dl>
            </div>
        </form>
    </ul>
    </div>

    </div>
</section>
<script type="text/javascript">
    $(function(){
        //check time
        remain_time({:session("verification_time")});

        //button to send code
        $("#get-code").on('click',function(){
            if($(this).hasClass("btn-disable")) return;
            var mobile = $("#mobile").val();
            var reg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/
            if(reg.test(mobile)){
                console.log("mobile match success");
            }else{
                alert("请填写正确手机号");
                return false;
            }

            send_code(mobile);
        });

        // send verification code to user's mobile
        function send_code(mobile){
            console.log("send_code");
            //make button disable
            $("#get-code").removeClass("btn-active").addClass("btn-disable");

            $.post(
                    "{:U('Login/send_verification_code')}",
                    "mobile="+mobile,
                    function(res){
                        console.log(res);
                        remain_time(res.time);
                        if(res.status == 1){
                            console.log("send code success");
                        }else{
                            console.log("send code failed");
                        }

                    }
            );
        }

        // input for verification code
        $("#code").on('change',function(){
            check_code($(this).val());
        });

        //check verification if is right
        function check_code(code){
            $.post(
                "{:U('Login/check_verification_code')}",
                "code="+code + "&mobile="+$("#mobile").val(),
                function(res){
                    console.log(res);
                    if(res.status == 1){
                        console.log("code is right");
                    }else{
                        alert(res.msg);
                    }
                }
            );
        }

        //time for button disable
        function remain_time(time){
            console.log("time     : "+time);
            var timestamp=new Date().getTime().toString().substr(0,10);
            console.log("timestamp: "+timestamp);
            if(time>0 && (timestamp-time)>=60){
                return ;
            }
            var loop = setInterval(function(){
                var timestamp=new Date().getTime().toString().substr(0,10);
                var input = $("#get-code");
                if(time>0 && (timestamp-time)<=5){
                    console.log("disable");
                    $(input).val((60-timestamp+time)+" S");
                    $(input).removeClass("btn-active").addClass("btn-disable");
                }else{
                    $(input).val("获取验证码");
                    console.log("enable");
                    $(input).removeClass("btn-disable").addClass("btn-active");
                    clearInterval(loop);
                }
            },500);

        }
    });


    function userLogin() {
        return true;
    }

    function register() {
        var agreement = $('#agreement').attr('checked');
        if(!agreement) {
            alert('请先同意协议！');
            return false;
        }
        return true;
    }
</script>
</body>
</html>
